<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/assets/layui-v2.5.5/css/layui.css" media="all" />
</head>
<body>
<br/>
<form class="layui-form" action="">
<div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">地市：</label>
    	<div class="layui-input-block">
    		<select id="city" lay-filter="city">
			</select>
    	</div>
    </div>  
    <div class="layui-inline">
    <label class="layui-form-label">区县：</label>
    	<div class="layui-input-block">
    		<select id="county" lay-filter="county">
			</select>
    	</div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">乡镇：</label>
    	<div class="layui-input-block">
    		<select id="town" lay-filter="town">
			</select>
    	</div>
    </div>  
    <div class="layui-inline">
    <label class="layui-form-label">行政村：</label>
    	<div class="layui-input-block">
    		<select id="village" lay-filter="village">
			</select>
    	</div>
    </div>  
</div> 
<div class="layui-form-item"> 
    <div class="layui-inline">
    <label class="layui-form-label">账号：</label>
    <div class="layui-input-block">
    	<input type="text" name="loginName"  placeholder="请输入账号" autocomplete="off" class="layui-input"/>
    </div>
    </div>
    <div class="layui-inline" >
    <label class="layui-form-label">开始时间：</label>
    	<div class="layui-input-block">
    		<input type="text" name="startTime" autocomplete="off" id="test1" class="layui-input"  placeholder="请输入开始时间">
    	</div>
    </div> 
     <div class="layui-inline" >
    <label class="layui-form-label">结束时间：</label>
    	<div class="layui-input-block">
    		<input type="text" name="endTime" autocomplete="off" id="test2" class="layui-input"  placeholder="请输入结束时间">
    	</div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">状态：</label>
    	<div class="layui-input-block">
   			<select id="status" lay-verify="required">
				<option value=''>请选择</option>
				<option value='1'>正常</option>
				<option value='0'>已注销</option>
			</select>
    	</div>
    </div> 
     <div class="layui-inline">
     &nbsp;&nbsp;<button type="button" class="layui-btn" onclick="searchTable();" >查询</button>
     &nbsp;&nbsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
     <button type="button" class="layui-btn" id="export" ><i class="layui-icon">&#xe67c;</i>导出</button>
    </div>
</div>
</form>
<table class="layui-hide" id="test" lay-filter="test" ></table>
<script type="text/html" id="toolbarDemo">
#for(x : powers)
	#if(x.pointcode == 'add')
		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
	#else if(x.pointcode == 'batch')
		<button class="layui-btn layui-btn-sm" lay-event="batch"><i class="layui-icon">&#xe609;</i>批量导入</button>
	#end
#end
</script>
<script type="text/html" id="barDemo">
#for(x : powers)
	#if(x.pointcode == 'edit')
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	#else if(x.pointcode == 'del')
		#[[ {{#  if(d.userStatus == 1){ }}<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">用户注销</a>
		{{#  } else { }}<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="del">用户启用</a>{{#  } }} ]]#
	#else if(x.pointcode == 'resetpwd')
		<a class="layui-btn layui-btn-xs" lay-event="resetpwd">重置密码</a>
	#end
#end
</script>
                        
<script src="/assets/layui-v2.5.5/layui.js" charset="utf-8"></script> 
<script src="/assets/js/area.js" charset="utf-8"></script> 
<script>
var $,table,form,laydate,mydata;
layui.use(['table','jquery','form','laydate'], function(){
	table = layui.table;
	form = layui.form;
	laydate = layui.laydate;
	$ = layui.$;
	//执行一个laydate实例
	  laydate.render({
	    elem: '#test1' 
	  });
	  laydate.render({
		    elem: '#test2' 
		  });
	var areas=#(areas);
	if(areas.length==1){
		getAllCitys();
	}else if(areas.length==2){
		$('#city').append("<option value='"+areas[1].id+"' >"+areas[1].areaName+"</option>");
		$('#city').attr("disabled","disabled");
		searchCounty();
	}else if(areas.length==3){
		$('#city').append("<option value='"+areas[1].id+"' >"+areas[1].areaName+"</option>");
		$('#county').append("<option value='"+areas[2].id+"' >"+areas[2].areaName+"</option>");
		$('#city').attr("disabled","disabled");
		$('#county').attr("disabled","disabled");
		searchTown();
	}else if(areas.length==4){
		$('#city').append("<option value='"+areas[1].id+"' >"+areas[1].areaName+"</option>");
		$('#county').append("<option value='"+areas[2].id+"' >"+areas[2].areaName+"</option>");
		$('#town').append("<option value='"+areas[3].id+"' >"+areas[3].areaName+"</option>");
		$('#city').attr("disabled","disabled");
		$('#county').attr("disabled","disabled");
		$('#town').attr("disabled","disabled");
		searchVillage();	
	}else if(areas.length==5){
		$('#city').append("<option value='"+areas[1].id+"' >"+areas[1].areaName+"</option>");
		$('#county').append("<option value='"+areas[2].id+"' >"+areas[2].areaName+"</option>");
		$('#town').append("<option value='"+areas[3].id+"' >"+areas[3].areaName+"</option>");
		$('#village').append("<option value='"+areas[4].id+"' >"+areas[4].areaName+"</option>");
		$('#city').attr("disabled","disabled");
		$('#county').attr("disabled","disabled");
		$('#town').attr("disabled","disabled");
		$('#village').attr("disabled","disabled");
	}
	form.render('select');
	form.on('select(city)', function(data){
		searchCounty();
		form.render('select');
	});
	 form.on('select(county)', function(data){
			searchTown();
			form.render('select');
		});
	 form.on('select(town)', function(data){
			searchVillage();
			form.render('select');
		});
	//查询table
	    searchTable();
	  //监听头工具栏事件
	  table.on('toolbar(test)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	    	layer.open({
                type: 2,
                title: '添加用户',
                content:['/user/userAdd'] ,//允许出现滚动条
                area:['50%', '90%']
            });   
	    break;
	  };
	});
	  //监听行工具事件
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    //console.log(data);
	    if(layEvent === 'del'){
	    	 $.ajax({
		    	    url : '/user/checkRolePower',
		    		type : "post",
		    		data : {id:data.roleIds},
		    		dataType : "json",
		    		success : function(ret) {
		    			if (ret.state == 'ok') {
		    				layer.confirm('确定要进行此操作吗?', function(index){
		    			        //obj.del(); //删除对应行（tr）的DOM结构
		    			        layer.close(index);	        
		    			        //向服务端发送删除指令
		    			        $.ajax({
		    			    	    url : '/user/userDel',
		    			    		type : "post",
		    			    		data : {id:data.id,userStatus:data.userStatus},
		    			    		dataType : "json",
		    			    		success : function(ret) {
		    			    			if (ret.state == 'ok') {
		    			    				layer.msg(ret.msg, {icon: 1, offset: '15px', time: 600}, function(){
		    			    					var index = parent.layer.getFrameIndex(window.name);
		    			    					parent.layer.close(index);
		    			    					$(".layui-laypage-btn").click();
		    			    				});
		    			    			} else {
		    			    				layer.msg(ret.msg, {icon: 2, offset: '10px'});
		    			    			}
		    			    		},
		    			    		error: function() {
		    			          } 
		    			      });
		    			      });
		    			} else {
		    				layer.msg(ret.msg, {icon: 2, offset: '10px'});
		    			}
		    		},
		    		error: function() {
		          } 
		      });				      
	    }else if(layEvent === 'resetpwd'){
	    	 $.ajax({
		    	    url : '/user/checkRolePower',
		    		type : "post",
		    		data : {id:data.roleIds},
		    		dataType : "json",
		    		success : function(ret) {
		    			if (ret.state == 'ok') {
		    				layer.confirm('确定要重置此用户的密码吗?', function(index){
		    			        layer.close(index);	        
		    			        $.ajax({
		    			    	    url : '/user/userResetPwd',
		    			    		type : "post",
		    			    		data : {id:data.id},
		    			    		dataType : "json",
		    			    		success : function(ret) {
		    			    			if (ret.state == 'ok') {
		    			    				layer.msg(ret.msg, {icon: 1, offset: '15px', time: 600}, function(){
		    			    					var index = parent.layer.getFrameIndex(window.name);
		    			    					parent.layer.close(index);
		    			    					$(".layui-laypage-btn").click();
		    			    				});
		    			    			} else {
		    			    				layer.msg(ret.msg, {icon: 2, offset: '10px'});
		    			    			}
		    			    		},
		    			    		error: function() {
		    			          } 
		    			      });
		    			      });
		    			} else {
		    				layer.msg(ret.msg, {icon: 2, offset: '10px'});
		    			}
		    		},
		    		error: function() {
		          } 
		      });				      
	   }else if(layEvent === 'edit'){
	       mydata = {
				data:JSON.stringify(data)
			};		
	       $.ajax({
	    	    url : '/user/checkRolePower',
	    		type : "post",
	    		data : {id:data.roleIds},
	    		dataType : "json",
	    		success : function(ret) {
	    			if (ret.state == 'ok') {
	    				layer.open({
	    	                type: 2,
	    	                title: '编辑用户',
	    	                content:['/user/userEdit'] ,
	    	                area:['50%', '90%']
	    	            });
	    			} else {
	    				layer.msg(ret.msg, {icon: 2, offset: '10px'});
	    			}
	    		},
	    		error: function() {
	          } 
	      });			
	    }
	  });
});
function searchTable(){
	table.render({
	    elem: '#test'
	    ,url:'/user/paginate'
	    ,where: {city: $('#city').val().trim(),county: $('#county').val().trim(),town: $('#town').val().trim(), village: $('#village').val().trim(),
	    	loginName: $('input[name="loginName"]').val().trim(),startTime:$('#test1').val(),endTime:$('#test2').val(), status: $('#status').val().trim()} 
		,toolbar: '#toolbarDemo'
	    ,title: '用户表'
	    ,cols: [[
	      {field:'id', title:'ID', width:100, fixed: 'left', unresize: true}
	      ,{field:'loginName', title:'账号', width:150}
	      ,{field:'userName', title:'姓名', width:100}
	      ,{field:'fullName', title:'区划', width:200}
	      ,{field:'roleNames', title:'角色', width:200}
	      ,{field:'createAt', title:'创建时间', width:200,sort: true}
	      ,{field:'userStatus', title:'状态', templet: function(d){if(d.userStatus == '1'){return '正常'}else{return '已注销'}},width:100}
	      ,{fixed: '', title:'操作', toolbar: '#barDemo', width:250}
	    ]]
	    ,page: true
	    ,request: {     
	        pageName: 'pageNumber' //页码的参数名称，默认：page
	        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
	    }
	  });
}
</script>
</body>
</html>